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ABSTRACT 


Undergraduate students obtain creative knowledge and important skills by 
studying HTML5 in foundation of web programming and the principles 
underlying of HTML5 design and implementation. HTML 5 is the new and 
stylish standard for HTML. These topics build up students' clasp of the power 
of creation, help students and improve their design skills. Understanding web 
programming thus helps students in ways key to many profession paths and 
interests. HTML5 provides the students everything to create animation, music, 
movies and can also be used to build convoluted web applications and also 
carries cross-platform. HTML5 standard novices the development of real-time 
collaborations in web browsers, which conducts to less work for web 
developers. 
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INTRODUCTION 

Web development is the work concerned in developing a web site for the World 
Wide Web. Web development can set from developing a simple single static 
page of plain text to complex web-based web applications, electronic business, 
and social network services. Web is an information system commonly knowns 
world wide web (www) where documents and other web resources are 
recognized by Uniform Resource Locators (URLs, such as 
https//www.sample.com/), which may be interlinked by hypertext, and are 
available over public (Internet] and private (Intranet and Extranet]. 


Web resources may be any type of downloaded media, but 
web pages are hypertext media that have been designed in 
Hypertext Markup Language (HTML]. HTML is the standard 
markup language for documents formatted to be displayed 
in a web browser. It can be served by technologies such as 
Cascading Style Sheets (CSS] and scripting languages such as 
JavaScript. Web pages may carry images, video, audio, and 
software components, that is widely usable across many 
platforms. HTML5 expresses the structure of a web page 
semantically and originally for the display of the document 
[ 2 ], 



HTML5 

HTML5 is the latest HTML standard, is being used widely 
design web pages that are rich in content. The array of new 
graphics and multimedia elements that it supports and the 
rich semantics, it uses eliminates the need for any additional 
plugins to display content. HTML5 is purely a set of new 
features made obtainable for developing web applications. It 
is particularly designed to improve the language with much 
better support for multimedia and server communication, 
making a web developer's job much easier [3]. With the 
development of HTML5 it has wide range of applications in 
multimedia direction. It can play video and audio and 
supports animations from the browser without the need of 
proprietary technologies [4]. 


Figl HTML5 Cross-Platform 

HTML5 carries cross-platform, designed to display web 
pages on a Personal Computer (PC], or a Tablet, a 
Smartphone or a IOS phone and Android phone (Fig-1]. 
HTML is invented by Tim Berners-Lee, first web page 
published August 6,1991. It is intended as a standard way to 
structuring documents and standardized by W3C (World 
Wide Web Consortium - pack of super nerds]. HTML5 is a 
new standard for HTML. The language used in practice 
change continuously as advances in our field and broadening 
uses of technology change how we model and design web 
pages. The rise of the Internet and the web, for example, 
fundamentally transformed the way many types of systems 
are designed, implemented, and deployed. 
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HTML5 Introduction 

<!DOCTYPE html> 

<html> 

<head> 

<title>Title of the document</title> 
</head> 

<body> 

The content of the document-......... 

</body> 

</html> 

Fig2. Minium HTML5 Document 

HTML5 provides some of the most interesting new features 
that include 

> Canvas 

> Video and Audio 

> Local Offline Storage 

> Form Controls 

> Content Specific elements 

Canvas 

The HTML <canvas> element is used to draw graphics, on 
the fly, via JavaScript. The <canvas> element is only a 
container for graphics. A canvas is a rectangular area on an 
HTML page. Be default, a canvas has no border and no 
content. Canvas has several methods for drawing paths, 
boxes, circles, text, and adding images. 
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Fig3 Browser Supports the <canvas> element 


TABLE1. The canvas element in HTML5 


Type 

Description 

Syntax 

Rectangle 

To display 
the 

rectangle 

<canvas id=”myCanvas” 
width=”100" style= 
“border: lpx solid 
#000000;"></canvas> 


Types 

Sample Pictures 
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Fig4 HTML5 Canvas 


Video and Audio 

A video could only be played in a browse with a plug-in like 
flash before HTML5. The HTML5 <video> element identifies 
a standard way to insert a video in a web page. 


Element 
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Fig5. Browser Supports the <video> and <audio> elements 


HTML5 features <audio> and <video> tags make it simple to 
add media to a website. HTML5 has developed embedding of 
video by providing native support for many different file 
types. 


TABLE2 HTML Video Media Types and Video Tags 


File 

Format 

Media 

Type 

Tag 

Description 

MP4 

Video/ 

mp4 

<video> 

Defines a video or 
movie 


Video/ 

webm 


Defines multiple 
media resources for 

WebM 

<source> 

media elements, 
such as <video> and 
<audio> 


Ogg 

Video/ 

ogg 

<track> 

Defines text tracks 
in media players 


<video width=”400” contorls> 

<source src=”Mr. Bean.mp4” type="video/mp4”> 
<source src=”Mr. Bean.ogg” type=”video/ogg”> 
<source src="Mr.Bean.webm” type=”video/webm"> 
</video> 



Fig6. Output of Video Tag 

Use the <audio> element to play an audio file in HTML. 


TABLE3. HTML Audio Media Types and Audio Tags 


File 

Format 

Media 

Type 

Tag 

Description 

MP3 

Audio/ 

mpeg 

<audio> 

Defines sound content 

OGG 

Audio/ 

ogg 

<source> 

Defines multiple 
media resources for 
media elements such 
as <video> and 
<audio> 

WAV 

Audio/ 

wav 




<audio controls> 

<source src="Rainbow.mp3" type="video/mpeg"> 
<source src="Rainbow.ogg" type= n audio/ogg M > 
</audio> 

> ttztiu / CljSgKJ 


Fig7 Output of Audio Tag 


@ IJTSRD | Unique Paper ID - IJTSRD27941 | Volume - 3 | Issue - 5 | July - August 2019 


Page 2531 







































International Journal of Trend in Scientific Research and Development (IJTSRD] @ www.ijtsrd.com elSSN: 2456-6470 


Local Offline Storage 

Web applications can store with web storage, data locally 
within the user browser. Application data had to be stored in 
cookies, include in every server request before HTML5. Web 
storage is more secure and large amount of data can be 
stored locally, without affecting website performance. The 
data in HTML5 local storage will be available even if you end 
the session by closing your browser. Offline storage allows 
users to save data in the user's browser and makes web apps 
and games work without a connection. 


Ruttnu Element 
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Figll Web form created using HTML5 elements 

Content Specific Elements 

HTML offers new elements for better document structure. 


Form Controls 

The most important form element is the <input> element. 
The input element can be showed in many ways, depending 
on the type attribute. 

<form action="/videotest.html"> 

Enter your name: 

<input name="name" type="text"><br><br> 
<input type="submit"> 

</form> 


Etitfr your name: khaing 


Submit 

Fig8. Web form created using HTML5 input element 


If user click the submit 



Fig9. Web form appeared when click the submit button 


In HTML5 <form> element defines a form for user input, 
<input> defines an input control <select> element defines a 
drop-down list. <output> elements defines the result of a 
calculation. The <option> elements defines an option that 
can be selected. By default, the first term in the drop-down 
list is selected. To define a pre-selected option, add the 
selected attribute to the option. The <textarea> element 
defines the multiline input field. The <button> element 
defines a clickable button. 


TABLE4 New Elements in HTML5 


Tag 

Descripti 

on 

Syntax 

<article> 

To display 
self- 

contained 

content 

<article><p>There are 
some article 
examples<px/article> 

<figcaption> 

To display 
caption of 
the figure 

<figcaption>Figl. 
Example</figcaptioin> 

<figure> 

To display 
image 

<figureximg 
src=example.jpg 
alt="sample" 
width="100" 
height="2 00"></figure 
> 

<footer> 

To display 
address 
and 

contact 

informatio 

n 

<footerxp>contact 
information:^ 
href=memekhaing2012 
@gmail.com>MeMe 
Khaing</ax/px/foot 
er> 

<header> 

To display 
the 

important 

header 

<headerxhl>Example 

l</hl> 

<h2 >Example2 ></h2 > 
</header> 

<nav> 

To display 
the 

navigation 

link 

<nav><a href 
="html">Html</a> 
</nav> 

<time> 

To display 
date and 
time 
picker 

<time datetime="2019- 
07-11 15:00"> Finished 
time 


All the HTML5 features mentioned above supports feasibility 
for all students, users and developers in developing web 
applications and designs without the use of plug-ins. 
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FiglO Web form created using HTML5 elements 


To reduce the code size for such kind of forms for web 
applications HTML5 is the best way to use. HTML5 is the 
basic language to learn for web technologies. HTML is that it 
is easy to code and also allows the use of templates, which 
makes designing a webpage easy. It is better than cookies 
because it allows for storage through multiple windows. 
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